<template>
  <div>
    <div>
      <!-- 输入框 -->
      <el-input
        class="SearchInput"
        style="width: 300px; margin-right: 8px; margin-top: 20px"
        size="small"
        v-model="projectName"
        clearable
        @clear="initProject"
        @keydown.enter.native="initProject"
        placeholder="请输入项目名搜索"
        prefix-icon="el-icon-search"
      >
      </el-input>
      <!-- 搜索按钮 -->
      <el-button
        type="primary"
        @click="initProject"
        icon="el-icon-search"
      ></el-button>
    </div>
    <!-- 表格 -->
    <div class="tableCLS">
      <el-table
        :data="projects"
        stripe
        style="width: 100%"
        border
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          label="实验标题"
          fixed
          width="250"
          height="90"
          align="left"
        >
          <template slot-scope="scope">
            <div @click="open1(scope.row)">
              {{ scope.row.title.slice(0, 19) }}.....
            </div>
          </template>
        </el-table-column>
        <el-table-column label="实验描述" width="250" height="90" align="left">
          <template slot-scope="scope">
            <div @click="open2(scope.row)">
              {{ scope.row.projectAbs.slice(0, 19) }}.....
            </div>
          </template>
        </el-table-column>
        <el-table-column label="实验内容" width="200">
          <template slot-scope="scope">
            {{ scope.row.title.slice(0, 10) }}.md
          </template>
        </el-table-column>
        <el-table-column label="难度等级" width="120" align="center">
          <template slot-scope="scope">
            <el-tag>{{ scope.row.projectType }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="项目领域" width="120" align="center">
          <template slot-scope="scope">
            <el-tag type="success">{{ scope.row.projectArea }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="研究方法" width="160" align="center">
          <template slot-scope="scope">
            <el-tag type="warning">{{ scope.row.projectMethod }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="projectTime"
          label="实验发布时间"
          align="center"
          width="160"
        >
        </el-table-column>
        <el-table-column
          prop="projectDataset"
          label="实验数据集"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.projectDataset == null">未设置</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="collectionQuantity"
          label="点赞数量"
          align="center"
          width="160"
        >
        </el-table-column>
        <el-table-column label="发布用户" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.user.nickname }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="90" align="center">
          <template slot-scope="scope">
            <el-button type="danger" @click="delProject(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div>
        <!-- 分页 -->
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ExpManager',
  data() {
    return {
      projects: '', //表格中显示的数据源
      projectName: '', //搜索项目时绑定的参数
      loading: false,
      total: 0,
      currentPage: 1,
      size: 10,
    }
  },
  methods: {
    initRole() {
      if (!window.sessionStorage.getItem('user')) {
        this.$message.error('请先进行登录!')
        this.$router.push({ path: '/' })
      }

      var a = JSON.parse(window.sessionStorage.getItem('user'))

      if (a.roleType == 1 || a.roleType == 2) {
        this.$message.error('权限不足!')
        this.$router.push({ path: '/' })
      }
    },
    initProject() {
      this.loading = true
      let url =
        '/experiment/?currentPage=' + this.currentPage + '&size=' + this.size

      if (this.projectName) {
        url += '&title=' + this.projectName
      }
      console.log('@', url)
      this.getRequest(url).then((resp) => {
        this.loading = false
        if (resp) {
          console.log('@', resp)
          this.projects = resp.data
          this.total = resp.total
        }
      })
    },
    sizeChange(size) {
      this.size = size
      this.initProject()
    },
    currentChange(currentPage) {
      this.currentPage = currentPage
      this.initProject()
    },
    open1(data) {
      this.$notify({
        title: '项目名称',
        message: data.title,
        position: 'top-left',
      })
    },
    open2(data) {
      this.$notify({
        title: '项目简介',
        message: data.projectAbs,
        position: 'top-left',
      })
    },
    delProject(data) {
      this.$confirm('此操作将永久删除改项目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.deleteRequest('/project/' + data.id).then((resp) => {
            if (resp) {
              this.initProject()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
  created() {
    this.initRole()
    this.initProject()
  },
}
</script>

<style>
.SearchInput {
  width: 300px;
}
.tableCLS {
  margin-top: 20px;
}
.uploadStudentButton {
  display: inline-flex;
  margin-right: 8px;
}
.divOne {
  border: 1px solid #409eff;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 5px;
  margin: 10px 0px;
}
</style>